<template>
	<view class="main" >
		<view class="followBtn" @click="fullow"><text>我的关注</text><u-icon name="arrow-right" color="#fff" size="20"></u-icon></view>
		<view class="followPeople" v-if='myRelation'>
			<view class="text">现阶段身体状况</view>
			<view class="healthStatus"  @click="user">糖尿病、高血压</view>
			<view class="change" @click.top="change">
				<image src="@/static/images/changicon.png" style="width: 40rpx;" mode="widthFix"></image>
				切换
			</view>
			<view class="phote"  @click="user">
				<view class="img" ><image src="@/static/images/header.png"></image></view>
				<view class="name">{{myRelation.name}}</view>
			</view>
		</view>
		
		<view class="followPeople" @click="fullow" v-else>
				<view class="content userInfo">
					<image class="img" :src="userInfo.headImgUrl"></image>
					<view>{{userInfo.nickName}}</view>
				</view>
		</view>
		
		
		<view class="peopleInfo" v-if='myRelation'>
			<view class="health">
				<view class="healthInfo">
					<view class="tit">血压</view>
					<view class="content" v-if="myRelation.bloodPressureMax">
						<text>
						{{myRelation.bloodPressureMax+'~'+myRelation.bloodPressureMin}}
						</text>mmHg</view>
					<view class="content" v-else>暂无</view>
					
				</view>
				<image src="@/static/images/indexicon1.png" class="img"  mode='heightFix'></image></view>
				<view class="health">
				<view class="healthInfo">
					<view class="tit">血氧</view>
					<view class="content" v-if="myRelation.bloodOxygen"><text>{{myRelation.bloodOxygen}}</text>%</view>
					<view class="content" v-else>暂无</view>
				</view>
				<image src="@/static/images/indexicon2.png" class="img"  mode='heightFix'></image></view>
				<view class="health">
				<view class="healthInfo">
					<view class="tit">体温</view>
					<view class="content" v-if="myRelation.temperature"><text>{{myRelation.temperature}}</text>摄氏度</view>
					<view class="content" v-else>暂无</view>
				</view>
				<image src="@/static/images/indexicon3.png" class="img"  mode='heightFix'></image></view>
				<view class="health">
				<view class="healthInfo">
					<view class="tit">睡眠</view>
					<view class="content" v-if="myRelation.totalSleep"><text>{{myRelation.totalSleep}}</text>小时</view>
					<view class="content" v-else>暂无</view>
				</view>
				<image src="@/static/images/indexicon4.png" class="img"  mode='heightFix'></image></view>
			
			
		</view>
	
	<tabbar :current="current"></tabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current:0,
				myRelationList:[],
				myRelation:null,
				index:0,
				openid:"",
				userInfo:""
			}
		},
		onLoad(e){
			if(e.openid){
				this.openid = e.openid;
			}
			this.initLogin();
		},
		methods: {
			initLogin(){
				this.openid = "oEkH_6sBBCnS42P4VxHHFp9u2uVw";
				this.$tools.loginInfo(this.openid).then(res=>{
					console.log(res)
					this.userInfo = res.user;
					this.getList()
				})
				
				
			},
			initDate(){
				if(this.myRelationList.length<=0){
					return;
				}
				let myRelationId = uni.getStorageSync("myRelationId");
				if(myRelationId){
					for(let i in this.myRelationList){
						let dat = this.myRelationList[i];
						if(dat.id == myRelationId){
							this.myRelation=dat;
							this.id=i;
							break
						}
					}
				}
				
				this.myRelation = this.myRelationList[0];
				this.index=0;
				this.setMyRelationId(this.myRelation.id);
				
			},
			change(){
				uni.showLoading({
					title: '切换中...',
					mask: false
				});
				if(this.index == this.myRelationList.length-1){
					this.index=0;
				}else{
					this.index++
				}
				setTimeout(res=>{
					this.myRelation = this.myRelationList[this.index];
					this.setMyRelationId (this.myRelation.id)
					uni.hideLoading();
				},200)
				
			},
			setMyRelationId(id){
				uni.setStorageSync("myRelationId",id);
			},
			getList(){
				this.$http.myRelation().then(res=>{
					if(res.code==0){
						this.myRelationList = res.list;
						this.initDate();
					}
					
				})
			},
			fullow(){
				uni.navigateTo({
					url:"/pages/followUser/followUser"
				})
			},
			user(){
				uni.navigateTo({
					url:`/pages/userInfo/userInfo?id=${this.myRelation.id}`
				})
			}
			
			
		}
	}
</script>

<style scoped >
	.main{
		background: url(@/static/images/indexbg.png) no-repeat #e7fcf5;
		background-size:100% auto;
		padding:30rpx 30rpx;
		font-size:26rpx;
		min-height:100vh;
		box-sizing: border-box;
		
	}
	.followBtn{
		color:#fff;
		font-size:40rpx;
		display: flex;
		padding:30rpx 0;
		align-items: center;
		line-height: 1;
	}
	.followBtn text{margin-right: 10rpx;margin-top:-5rpx;}
	.followPeople{background:#fff;border-radius: 26rpx;padding:30rpx;position: relative;}
	.followPeople .text{color:#666;}
	.followPeople .healthStatus{font-size:40rpx;color: #000;font-weight:bold;}
	.followPeople .change{background:#0ea26e;color:#fff;display: inline-block;padding:0 14rpx;border-radius: 50rpx;height:50rpx; display:inline-flex;align-items: center;justify-content: center;
		margin-top:40rpx;
	}
	.followPeople .phote{position: absolute;text-align: center;right:30rpx;top:-70rpx;font-size:30rpx;}
	.followPeople .phote image{border-radius: 50%;width:230rpx;height: 230rpx;}

	.peopleInfo{display:flex; flex-wrap: wrap; justify-content: space-between;}
	.health{background:#fff;border-radius: 26rpx;padding:30rpx;margin-top:30rpx;width:48%; box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		position: relative;
	}
	.health .healthInfo .tit{color:#000;font-weight: bold;color:#000;font-size:36rpx;}
	.health .content{padding-top:22rpx;color:#999;display: flex; align-items: center;}
	.health .content text{
		color:#666;width:140rpx;display: inline-block;font-size:30rpx;
	}
	.health .img{height:72rpx;position: absolute;right:30rpx;top:30rpx;}
	.userInfo {
		justify-content: flex-start;
		padding-top:0;
		color:#0ea26e;
		font-size:40rpx;
		
	}
	.userInfo .img{
		width: 160rpx;
		height:160rpx;
		border-radius: 160rpx;
		margin-right:20rpx;
	}
</style>
